<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Hello Service</title>
    <script src="../lib/angular.js"></script>
    <script src="../lib/angular-route.js"></script>
    <script type="text/javascript">
        var myApp = angular.module('myApp', ['ngRoute']);
        myApp.controller('myFactoryCtrl', ['$scope', 'myFactory', function ($scope, myFactory) {
            console.log(myFactory.getArtist());
            $scope.artist = myFactory.getArtist();
        }]);
        /*
         当使用factory创建一个factory服务（其实是对象），然后添加属性、方法，最后一定要返回这个对象。
         当你通过factory把它传入到控制器时，这个自定义的factory的所有属性和方法，通过factory服务都是可用的。
         此时的factory服务就是返回的对象。
         */
        myApp.factory('myFactory', function () {
            var _artist = 'Vince';
            var service = {};
            service.getArtist = function () {
                return _artist;
            }
            return service;
        });
        /*
         当使用service时，它使用new关键字进行初始化。所以，你必须把属性和方法添加到自定义service的引用对象this中，然后，service会返回this.
         确认，使用service时，不需要factory式的返回对象，service默认是返回this.
         当你通过service把它传到到控制器（controller)时，这个自定的service的所有属性和方法通过传入的service都是可用的。
         */
        myApp.controller('myServiceCtrl', ['$scope', 'myService', function ($scope, myService) {
            $scope.artist = myService.getArtist();
        }]);
        myApp.service('myService', function () {
            var _artist = 'Nelly';
            this.getArtist = function () {
                return _artist;
            };
        });

    </script>
</head>
<body ng-app="myApp">
<div ng-controller="myFactoryCtrl">
    <h1>Hello Factory</h1>

    <h1>{{artist}}</h1>
</div>
<div ng-controller="myServiceCtrl">
    <h1>Hello Service</h1>

    <h1>{{artist}}</h1>
</div>

</body>
</html>